<template>
	<view>
		<view class="container" :style="{'padding-top':navTop+'px'}">
		<!-- <view class="my-header mb30" statusBar="true">
			<view class="circle-one"></view>
			<view class="cus-nav-bar" :style="{'padding-top':navTop+'px'}">
				<!-- <view class="cus-nav-title">
					我的
				</view> -->
			<!--</view>
			<view class="avatar">
				<view class="avatar-left">
					<text>{{userInfo.nickName}}</text>
				</view>
				<view class="avatar-right">
					<image :src="userInfo.headerPic" mode="aspectFill"></image>
				</view>
			</view>
		</view> -->
		<view class="uni-padding-wrap">
			<view class="site-container con-position mt100">
				<view class="my-container-card">
					<view class="bg-white uni-flex boxsiz ac">
						<view class="avatar">
							<image mode="aspectFill" :src="userInfo.headerPic || 'https://green-leader.oss-cn-hangzhou.aliyuncs.com/common/%E5%8F%8B%E6%AD%A5%E9%A2%86%E9%98%9Flogo.png'"></image>
						</view>
						<view class="flex1">
							<view class="font_size_36 b-font mb40">{{userInfo.nickName || '友步领队'}}</view>
							<view class="mb30">
								<text class="mr50">创建行程</text><text>{{userInfo.createItineraryCount}}个</text>
							</view>
							<view class="mb30">
								<text class="mr50">参加行程</text><text>{{userInfo.joinItineraryCount}}次</text>
							</view>
						</view>
					</view>
				</view>
				<view class="my-container-card">
					<view class="site-card bg-white ">
						<view class="system-list">
							<view class="system-list-item is-flex site-container has-border-bottom"
								@tap="navgetTo('pages/my/select_root','my','')">
								<view class="system-list-item-left">
									<view class="system-list-item-content">我的线路</view>
								</view>
								<view class="system-list-item-right">
									<uni-icons type="right" color="#999999"></uni-icons>
								</view>
							</view>
							<view class="system-list-item is-flex site-container has-border-bottom"
								@tap="navgetTo('pages/my/receipt_order')">
								<view class="system-list-item-left">
									<view class="system-list-item-content">我的订单</view>
								</view>
								<view class="system-list-item-right">
									<uni-icons type="right" color="#999999"></uni-icons>
								</view>
							</view>
							<view class="system-list-item is-flex site-container"
								@tap="navgetTo('pages/my/myWallet','')">
								<view class="system-list-item-left">
									<view class="system-list-item-content">我的钱包</view>
								</view>
								<view class="system-list-item-right">
									<text class="font_size_24">可提现金额{{accountInfo.canUseBalance}}</text>
									<uni-icons type="right" color="#999999"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="my-container-card">
				<view class="site-card bg-white ">
					<view class="system-list">
						<view class="system-list-item is-flex site-container has-border-bottom"
							@click="toMyInfo">
							<view class="system-list-item-left">
								<view class="system-list-item-content">个人信息</view>
							</view>
							<view class="system-list-item-right">
								<uni-icons type="right" color="#999999"></uni-icons>
							</view>
						</view>
						<view class="system-list-item is-flex site-container has-border-bottom" @tap="navgetTo('pages/agreement/privacy')">
							<view class="system-list-item-left">
								<view class="system-list-item-content">用户协议</view>
							</view>
							<view class="system-list-item-right">
								<uni-icons type="right" color="#999999"></uni-icons>
							</view>
						</view>
						<view class="system-list-item is-flex site-container has-border-bottom" @tap="navgetTo('pages/agreement/agreement')">
							<view class="system-list-item-left">
								<view class="system-list-item-content">隐私政策</view>
							</view>
							<view class="system-list-item-right">
								<uni-icons type="right" color="#999999"></uni-icons>
							</view>
						</view>
						<view class="system-list-item is-flex site-container" @tap="navgetTo('pages/my/customer_service')">
							<view class="system-list-item-left">
								<view class="system-list-item-content">客服咨询</view>
							</view>
							<view class="system-list-item-right">
								<uni-icons type="right" color="#999999"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		</view>
	</view>
	<loginwx ref="login"></loginwx>
</template>

<script>
	// 注入全局变量
	import api from '@/common/api/webapi.js'; /*api*/
	import storageUtil from '@/common/util/storageUtil.js';
	import loginwx from '@/components/login-wx/loginwx.vue';
	export default {
		components: {
			loginwx
		},
		data() {
			return {
				navTop: 40,
				mobile: '15398573809',
				userLoginFlag: false,
				userInfo: {
					mobile: "",
					showMobile: "",
					nickName: "",
					signature: '', //头像
					sex: 0,
					headerPic:"",
					age:0,
					memberAccount:"",
					createItineraryCount:"",
					joinItineraryCount:"",
				},
				accountInfo:{}
			}
		},
		computed:{
			
		},
		onShow(){
			// 每次页面显示时都检查登录状态并重新加载数据
			this.checkIsLogin();
		},
		onLoad() {
			this.checkIsLogin();
			// 获取全局参数
			const app = getApp()
			this.navTop = app.globalData.navTop;
			let userLoginFlag = storageUtil.getStorageData("isLogin");
			console.log(userLoginFlag);

			if (!userLoginFlag || userLoginFlag == '') {
				this.userLoginFlag = false;
			} else {
				this.userLoginFlag = true;
				//获取用户信息
				this.GetUserInfo()
			}
		},
		methods: {
			checkIsLogin() {
				let userLoginFlag = storageUtil.getStorageData("isLogin");
				if (!userLoginFlag || userLoginFlag == '') {
					this.wxLogin();
					this.popShowHandle();
					return;
				} else {
					// 用户已登录，刷新用户数据
					this.GetUserInfo();
				}
			},
			wxLogin() {
				let _this = this
				uni.login({
					provider: 'weixin',
					success: function(res) {
						if (res.code) {
							storageUtil.saveStorageData('login_code', res.code);
							console.log("获取微信code" + res.code);
						} else {
							_this.wxLogin()
						}
					},
					fail: (res) => {
						_this.wxLogin()
					}
				})
			},
			GetUserInfo(){
				api.getUserInfo().then(res => {
					if (res.code === 0) {
						if (res.data) {
							this.userInfo.mobile = res.data.mobile;
							this.userInfo.ShowPhoneNumber = this.userInfo.mobile.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
							this.userInfo.nickName = res.data.nickName;
							this.userInfo.signature = res.data.signature;
							this.userInfo.sex = res.data.sex;
							this.userInfo.headerPic = res.data.headerPic;
							this.userInfo.age = res.data.age;
							this.userInfo.memberAccount = res.data.memberAccount;
							this.userInfo.createItineraryCount = res.data.createItineraryCount;
							this.userInfo.joinItineraryCount = res.data.joinItineraryCount;
							this.GetWalletInfo();
						}
					} else if(res.code === 10021){
						this.popShowHandle();
					}else{}
				}).catch()
			},
			GetWalletInfo() {
				let _this = this;
				api.walletDetail().then(res => {
					if (res.code === 0) {
						_this.accountInfo = res.data;
					} else {}
				}).catch()
			},
			toMyInfo(){
				uni.navigateTo({
					url: "/pages/my/myInfo?params=" + encodeURIComponent(JSON.stringify(this.userInfo))
				});
			},
			popShowHandle() {
				setTimeout(() => {
					this.$refs.login.open()
				}, 50);
			},
			navgetTo(page, param, type) {
				if (param != undefined) {
					type = type || '';
					let data = {
						data: param,
						page: type
					}
					uni.navigateTo({
						url: "/" + page + "?param=" + encodeURI(JSON.stringify(data))
					});
				} else {
					uni.navigateTo({
						url: "/" + page
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f8f8f8;
		min-height: 100vh;
	}
	.my-header {
		background-color: #f8f8f8;
	}

	.circle-one {
		width: 520rpx;
		height: 520rpx;
		border-radius: 50%;
		background-image: linear-gradient(to right bottom, #eff5e3 60%, #eff5e3 80%);
		position: absolute;
		top: -100rpx;
		left: -90rpx;
	}

	.is-flex {
		display: flex;
	}

	.cus-nav-bar {
		position: sticky;
		top: 0;
		flex-direction: row;
		height: calc(44px + env(safe-area-inset-top));
		line-height: calc(44px + env(safe-area-inset-top));
		padding: 15rpx 20rpx;
		color: #000;
		display: flex;

	}

	.cus-nav-title {
		text-align: center;
		flex-grow: 1;
		font-size: 32rpx;
	}

	.avatar {
		display: flex;
		align-items: center;
	}

	.avatar-left {
		position: relative;
		z-index: 99;
		width: 65%;
		padding-left: 40rpx;

		text {
			font-size: 36rpx;
			font-weight: bold;
			color: $uni-text-color-black;

		}
	}

	.avatar {
		width: 278rpx;
		height: 278rpx;
		text-align: right;
		padding-right: 40rpx;
		image {
			width: 278rpx;
			height: 278rpx;
			object-fit: cover;
			border-radius: 50%;
		}
	}

	.my-container-bg {
		height: 100rpx;
		width: 100%;
	}

	.site-card {
		width: 100%;
	}

	.my-container-card {
		background-color: $uni-text-color-white;
		box-shadow: 2rpx 2px 10rpx $uni-text-color-grey8;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.card-left {
		display: flex;
		line-height: 120rpx;
		height: 120rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}

		.font-f-h {
			font-size: 32rpx;
		}
	}

	.card-right {
		line-height: 120rpx;
		height: 120rpx;
	}



	.con-position {
		position: relative;
	}
</style>